<template>
	<view class="warp">
		<view class="header"></view>
		<view class="logo">
			<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/WechatIMG133.png"></image>
		</view>
		<!-- <view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" 
			:is-scroll="false" bg-color="rgba(0,0,0,0)" :font-size="35" :bar-width="250"
			active-color="#13797f" :bold="false" inactive-color="#13797f" ></u-tabs-swiper>
		</view> -->
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item >
				<view class="login_box">
					<view class="phone_box">
						<u-input :clearable="false" v-model="phoneNumber" placeholder="手机号或者客户编码登录" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
					</view>
					<view class="phone_box">
						<u-input :clearable="false" v-model="password" :password-icon="false" placeholder="请输入密码(长度为6-16位)" type="password" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="register" @click="toRegister(1)">忘记密码</view>
					<view class="register" @click="toRegister(2)">还没有账号？去注册</view>
				</view>
			</swiper-item>
<!-- 			<swiper-item >
				<view class="login_box">
					<view class="phone_box">
						<u-input :clearable="false" v-model="phoneNumber" placeholder="请输入手机号" type="number" :maxlength="11" :custom-style="{width:'500rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
					</view>
					<view class="phone_box">
						<u-input :clearable="false" v-model="code" placeholder="请输入验证码" type="number" :maxlength="6" :custom-style="{width:'340rpx',fontSize:'30rpx'}" placeholder-style="color:#20cbd4;font-size:35rpx"/>
						<view class="code" @click="getCode">{{codeTips}}</view>
					</view>
				</view>
				<view class="register" @click="toRegister(2)">还没有账号？去注册</view>
			</swiper-item> -->
		</swiper>
		
		<view class="loginBtn">
			<u-button @click="onLogin" :custom-style="loginBtnStyle" hover-class="none" shape="circle" plain>登陆</u-button>
		</view>
		<u-toast ref="uToast" />
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import {login,getPhoneCode} from "@/common/api.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:"",
				password:"",
				loginBtnStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4"
				},
				codeTips: '',
				list: [{
					name: '密码登录'
				}, {
				 	name: '验证码登陆'
				 }
				],
				current: 0,
				isBack: 0,
				swiperCurrent: 0,
			}
		},
		onLoad(options) {
			this.isBack = options.isBack || 0
			this.isBack = parseInt(this.isBack)
		},
		onBackPress(e) {
			uni.switchTab({
				url:"/pages/tabBar/home"
			});
			return true;
		},
		methods: {
			toRegister(type){
				uni.redirectTo({
					url:"/login/register?type="+type+"&isBack="+this.isBack
				})
			},
			onLogin(){
				// if(!this.$u.test.mobile(this.phoneNumber)){
				// 	this.$refs.uToast.show({title: '您输入的手机号不正确'});
				// 	return;
				// }
				if(this.current==1&&!this.$u.test.code(this.code,4)){
					this.$refs.uToast.show({title: '您输入的验证码不正确'});
					return;
				}
				if(this.current==0&&!this.$u.test.rangeLength(this.password, [6, 16])){
					this.$refs.uToast.show({title: '您输入的密码不正确'});
					return;
				}
				var index = this.swiperCurrent;
				var type = "code";
				if(index == '0'){
					type = "password";
				}
				login(this,{phone:this.phoneNumber,code:this.code,password:this.password,type:type});
			},
			getCode() {
				if(!this.$u.test.mobile(this.phoneNumber)){
					this.$refs.uToast.show({title: '您输入的手机号不正确'});
					return;
				}
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					getPhoneCode(this,{phone:this.phoneNumber,type:"login"})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		/* #ifndef H5 */
		background: linear-gradient(180deg,#6de3e9,#a0edf1 40%,#fff 98%);
		/* #endif */
		/* #ifdef H5 */
		background: #a0edf1;
		/* #endif */
		
		height: 100%;
	}
	.header{
		background-image: url("https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/logo_bg.png");
		background-size: 100% 100%;
		background-position: 0% 0%;
		background-repeat: no-repeat no-repeat;
		width: 100%;
		/* #ifndef H5 */
		height: 400rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 280rpx;
		/* #endif */
	}
	.logo{
		width: 400rpx;
		height: 120rpx;
		margin: 0 175rpx 50rpx;
	}
	.logo image{
		width: 100%;
		height: 100%;
	}
	.swiper{
		height:450rpx;
	}
	.login_box{
		margin: 70rpx 50rpx 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.phone_box{
		padding:30rpx 30rpx 10rpx;
		width: 590rpx;
		border-bottom:1rpx solid #20cbd4;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.code{
		font-size: 30rpx;
		color:#13797f;
	}
	.register{
		color: #13797f;
		display: flex;
		justify-content: flex-end;
		padding: 0 80rpx 40rpx;
	}
	.loginBtn{
		padding: 0 100rpx;
	}
</style>
